<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>应用中心</title>
  <link rel="stylesheet" href="{__CSS__}/element_ui.css"/>
  <link rel="stylesheet" href="{__CSS__}/style.css"/>
  <script src="{__JS__}/vue2.js"></script>
  <script src="{__JS__}/element_ui.js"></script>
  <script src="{__JS__}/axios.min.js"></script>
  <script src="{__JS__}/request.js"></script>
</head>
<body>
<div id="app">
  <div class="app-loading" v-if="pageLoading">
    <div class="app-loading__logo">
      <img src="{__IMG__}/logo.png"/>
    </div>
    <div class="app-loading__loader"></div>
    <div class="app-loading__title">{$title}</div>
  </div>
  <el-card class="box-card" v-else>
    <div slot="header" class="clearfix">
      <span>应用中心</span>
    </div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="应用列表" name="first">
        <div class="search-box">
          <el-form :inline="true" :model="searchForm" class="demo-form-inline" style="margin-top: 20px;">
            <el-form-item label="插件名称">
              <el-input v-model="searchForm.title" placeholder="" clearable size="small"></el-input>
            </el-form-item>
            <el-form-item label="插件状态">
              <el-select v-model="searchForm.status" placeholder="插件状态" size="small" clearable>
                <el-option label="待安装" value="1"></el-option>
                <el-option label="已安装" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSearch" size="small" icon="el-icon-search" >查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div style="width:100%;height:0;border-bottom:#E4E7ED 1px dashed;margin-bottom: 15px"></div>
        <el-table
                :data="tableData"
                style="width: 100%">
          <el-table-column
                  prop="title"
                  label="应用名称">
          </el-table-column>
          <el-table-column
                  prop="name"
                  label="标识">
          </el-table-column>
          <el-table-column
                  prop="home_page"
                  width="260px"
                  :show-overflow-tooltip="true"
                  label="地址">
          </el-table-column>
          <el-table-column
                  prop="author"
                  label="作者">
          </el-table-column>
          <el-table-column
                  label="版本">
            <template scope="scope">
              <el-tag type="danger">{{ scope.row.version }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
                  prop="description"
                  width="260px"
                  :show-overflow-tooltip="true"
                  label="描述">
          </el-table-column>
          <el-table-column
                  label="状态">
            <template scope="scope">
              <el-tag type="danger" v-if="scope.row.status == 1">待安装</el-tag>
              <el-tag type="success" v-if="scope.row.status == 2">已安装</el-tag>
            </template>
          </el-table-column>
          <el-table-column
                  prop="create_time"
                  width="180px"
                  label="录入时间">
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="200px">
            <template slot-scope="scope">
              <el-button
                      v-if="scope.row.status == 1"
                      type="text" size="small"
                      @click="handleInstall(scope.row)">安装
              </el-button>
              <el-button
                      v-if="scope.row.status == 1"
                      type="text" size="small"
                      @click="handleDelete(scope.row)">删除
              </el-button>
              <el-button
                      v-if="scope.row.status == 2"
                      type="text" size="small"
                      @click="handleUnInstall(scope.row)">卸载
              </el-button>
<!--              <el-button-->
<!--                      type="text" size="small"-->
<!--                      @click="handlePack(scope.row)">打包-->
<!--              </el-button>-->
<!--              <el-button-->
<!--                      type="text" size="small"-->
<!--                      @click="handleUpdate(scope.row)">生成升级包-->
<!--              </el-button>-->
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
                style="margin-top: 10px"
                background
                layout="->, prev, pager, next"
                :page-size="searchForm.limit"
                @current-change="pageChangeHandle"
                :total="total">
        </el-pagination>
      </el-tab-pane>
      <el-tab-pane label="创建插件" name="second">
        <el-form ref="ruleForm" :rules="rules" :model="form" label-width="80px">
          <el-form-item label="插件标识" prop="name">
            <el-input v-model="form.name" style="width: 500px"></el-input>
          </el-form-item>
          <el-form-item label="插件名称" prop="title">
            <el-input v-model="form.title" style="width: 500px"></el-input>
          </el-form-item>
          <el-form-item label="作者" prop="author">
            <el-input v-model="form.author" style="width: 500px"></el-input>
          </el-form-item>
          <el-form-item label="主页" prop="home_page">
            <el-input v-model="form.home_page" style="width: 500px"></el-input>
          </el-form-item>
          <el-form-item label="版本" prop="version">
            <el-input v-model="form.version" style="width: 500px"></el-input>
          </el-form-item>
          <el-form-item label="描述">
            <el-input v-model="form.description" style="width: 500px" type="textarea" :rows="3"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit('ruleForm')" :loading="loading">立即创建</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
<!--      <el-tab-pane label="安装插件" name="third">-->
<!--        <el-form ref="form" :model="installForm" label-width="80px">-->
<!--          <el-form-item label="包类型">-->
<!--            <el-radio-group v-model="installForm.package_type">-->
<!--              <el-radio label="1">安装包</el-radio>-->
<!--              <el-radio label="2">升级包</el-radio>-->
<!--            </el-radio-group>-->
<!--          </el-form-item>-->
<!--          <el-form-item label="安装包" style="width: 250px">-->
<!--            <el-upload-->
<!--                    class="upload-demo"-->
<!--                    action="{'admin/attachment/uploadOtherFile'}"-->
<!--                    :limit="1"-->
<!--                    :on-success="successHandle">-->
<!--              <el-button size="small" type="default" icon="el-icon-upload">点击上传</el-button>-->
<!--            </el-upload>-->
<!--          </el-form-item>-->
<!--          <el-form-item>-->
<!--            <el-button type="primary" @click="install" size="small">确认安装</el-button>-->
<!--          </el-form-item>-->
<!--        </el-form>-->
<!--      </el-tab-pane>-->
    </el-tabs>
  </el-card>

  <el-dialog title="处理更新包" :visible.sync="updateDialog" width="900px" destroy-on-close :close-on-click-modal="false">
    {include file="/plugin/files"}
  </el-dialog>
</div>

<script>
  new Vue({
    el: '#app',
    data: function () {
      return {
        pageLoading: true,
        tableData: [],
        baseIndex: '/{:config("shop.backend_index")}/',
        activeName: 'first',
        searchForm: {
          limit: 15,
          page: 1,
          title: '',
          status: ''
        },
        total: 1,
        form: {
          name: '',
          title: '',
          description: '',
          author: '',
          home_page: '',
          version: '1.0'
        },
        // 安装表单
        installForm: {
          name: '',
          package_type: '1',
          package_url: ''
        },
        // 规则
        rules: {
          name: [
            { required: true, message: '请输入插件标识'}
          ],
          title: [
            { required: true, message: '请输入插件名称'}
          ],
          author: [
            { required: true, message: '请输入插作者名称'}
          ],
          home_page: [
            { required: true, message: '请输入插件主页'}
          ],
          version: [
            { required: true, message: '请输入插件版本'}
          ]
        },
        loading: false,
        updateForm: {
          name: '',
          files: ''
        },
        updateDialog: false, // 更新弹层
      }
    },
    mounted() {
      // 获取应用列表
      this.getAppList()
      this.pageLoading = false
    },
    methods: {
      // 获取信息
      handleClick(active) {
        if (active.name == 'first') {
          this.getAppList()
        }
      },
      // 获取应用列表
      async getAppList() {
        let res = await request.get(this.baseIndex + 'plugin/index', this.searchForm)
        this.total = res.data.total
        this.tableData = res.data.data
      },
      // 分页修改
      pageChangeHandle(val) {
        this.searchForm.page = val
        this.getAppList()
      },
      // 安装
      handleInstall(row) {
        this.$confirm('您即将安装该插件，确定继续吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          let res = await request.get(this.baseIndex + 'plugin/install', {id: row.id})
          if (res.code == 0) {
            this.$message.success('安装成功')
            this.getAppList()
          } else {
            this.$message.error(res.msg)
          }
        });
      },
      // 删除
      async handleDelete(row) {
        this.$confirm('删除插件则会将插件的文件也删除，请谨慎操作！', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          let res = await request.get(this.baseIndex + 'plugin/del', {id: row.id})
          if (res.code == 0) {
            this.$message.success('删除成功')
            this.getAppList()
          } else {
            this.$message.error(res.msg)
          }
        });
      },
      // 卸载
      handleUnInstall(row) {
        this.$confirm('即将卸载该程序，卸载后该功能将不可使用，确定继续吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          let res = await request.get(this.baseIndex + 'plugin/uninstall', {id: row.id})
          if (res.code == 0) {
            this.$message.success('卸载成功')
            this.getAppList()
          } else {
            this.$message.error(res.msg)
          }
        });
      },
      // 创建插件
      onSubmit(formName) {
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            this.loading = true
            let res = await request.post(this.baseIndex + 'plugin/create', this.form)
            this.loading = false

            if (res.code == 0) {
              this.$message.success(res.msg)
              this.getAppList()
              setTimeout(() => {
                window.location.reload();
              }, 1500)
            } else {
              this.$message.error(res.msg)
            }
          }
        });
      },
      // 搜索
      onSearch() {
        this.searchForm.page = 1
        this.getAppList()
      },
      // 打包应用
      handlePack(row) {
        this.$confirm('确定打包该应用吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          let res = await request.get(this.baseIndex + 'plugin/pack', {name: row.name})
          if (res.code == 0) {
            this.$message.success('打包成功')
            setTimeout(() => {
              this.$confirm('您需要下载该打包文件吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                window.location.href = '/' + row.name + '.zip'
              });
            }, 1500)
          } else {
            this.$message.error(res.msg)
          }
        });
      },
      // 制作升级包
      handleUpdate(row) {
        this.updateForm.name = row.name
        this.updateDialog = true
      },
      // 提交更新包信息
      async doUpdateSubmit() {
        let res = await request.post(this.baseIndex + 'plugin/update', this.updateForm)
        if (res.code == 0) {
          this.$message.success(res.msg)
          this.updateDialog = false
          setTimeout(() => {
            this.$confirm('您需要下载该更新包文件吗?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              window.location.href = '/' + this.updateForm.name + '_update_' + this.updateForm.version + '.zip'
            });
          }, 1500)
        } else {
          this.$message.error(res.msg)
        }
      },
      // 上传
      successHandle(file) {
        this.installForm.package_url = file.data.url
        this.installForm.name = file.data.name
      },
      // 安装
      async install() {
        let res = await request.post(this.baseIndex + 'plugin/import', this.installForm)
        if (res.code == 0) {
          this.$message.success(res.msg)
          setTimeout(() => {
            window.location.reload();
          }, 1500)
        } else {
          this.$message.error(res.msg)
        }
      }
    }
  });
</script>
</body>
</html>
